<template>
	<view class="content">
		
		<view class="zhanwei"></view>
		
		<view class="listBox">
			<view class="list" v-for="(item,index) in list">
				<view class="name">{{item.name}}</view>
				<view class="optionsBox">
					<view class="optionsLabel">序号：</view>
					<view class="optionsLabel">{{item.xuhao}}</view>
				</view>
				<view class="categoryBox">
					<view @click="choose(index,indexIn)" v-for="(itemIn,indexIn) in item.category" class="category" :class="item.chooseIndex == indexIn?'choose':''">{{itemIn.name}}</view>
				</view>
				<view class="optionsBox">
					<view class="optionsLabel">进货：</view>
					<view class="optionsDes">{{item.category[item.chooseIndex].jinhuoshu}}</view>
				</view>
				<view class="optionsBox">
					<view class="optionsLabel">出货：</view>
					<view class="optionsDes">{{item.category[item.chooseIndex].chuhuoshu}}</view>
				</view>
				<view class="optionsBox">
					<view class="optionsLabel">库存：</view>
					<view class="optionsDes">{{item.category[item.chooseIndex].kucun}}</view>
				</view>
				<view class="optionsBox">
					<view class="optionsLabel">成本：</view>
					<view class="optionsDes">{{item.category[item.chooseIndex].chengben}}</view>
				</view>
				<view class="btnBox">
					<u-button  @click="goDetail(item.id)" type="primary" size="small" text="编辑"></u-button>
					<view style="width: 30upx;"></view>
					<u-button  @click="del(item.id)" type="error" size="small" text="删除"></u-button>
				</view>
			</view>
		</view>
		<view class="tips" @click="count">使用本地数据，删除小程序会导致数据清空，如使用请勿删除小程序，可使用导入导出功能同步数据</view>
		<view style="height: 500upx;"></view>
		<view class="btnListBox">
			<view class="addBox" @click="daochu" v-if="showDaoru">
				导出
			</view>
			<view class="addBox" @click="daoruTips" v-if="showDaoru">
				导入
			</view>
			<view class="addBox" @click="goDetail()">
				<u-icon name="plus" color="#ffffff" size="28"></u-icon>
			</view>
		</view>
		<view class="searchBox">
			<u-search placeholder="请输入货物名称" v-model="name" :showAction="false" @change="search"></u-search>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				oldList:[],
				list:[],
				showDaoru:false
			}
		},
		onShow() {
			let count = uni.getStorageSync('count')||0
			if(count>10){
				this.showDaoru = true
			}
			this.setList()
		},
		methods: {
			count(){
				let count = uni.getStorageSync('count')||0
				count++
				uni.setStorageSync('count',count)
				if(count>10){
					this.showDaoru = true
				}
			},
			daoruTips(){
				let that = this
				uni.showModal({
					content:"导入分两种形式，请仔细阅读提示。",
					showCancel:true,
					cancelText:"取消",
					confirmText:"确认",
					success(res) {
						if(res.confirm){
							that.daoru()
						}
					}
				})
			},
			daoru(){
				let that = this
				uni.showModal({
					content:"从微信会话中选择文件，选择合并会合并导入进来的数据，覆盖会只保留导入数据",
					showCancel:true,
					cancelText:"覆盖",
					confirmText:"合并",
					success(res) {
						if(res.confirm){
							that.daoruType(1)
						} else {
							that.daoruType(2)
						}
					}
				})
			},
			daoruType(type){
				let that = this
				wx.chooseMessageFile({
				  count: 1,
				  type: "all", //all,video,image,file
				  success:(res)=> {
					console.log(res);
					wx.getFileSystemManager().readFile({
					  filePath: res.tempFiles[0].path,
					  encoding: 'utf8',
					  position: 0,
					  success(resIn) {
						  console.log(resIn.data)
						  let arr = JSON.parse(resIn.data)
							let list = uni.getStorageSync('list')||[]
							if(type == 1){
								list.push(...arr)
							} else {
								list = arr
							}
							list = list.map((item,index)=>{
								item.id = index+1
								return item
							})
							uni.setStorageSync('list',list)
							that.setList()
					  },
					  fail(resIn) {
					    console.error(resIn)
					  }
					})
				  },
				});
			},
			daochu(){
				const fs = wx.getFileSystemManager()
				fs.writeFile({
				  filePath: `${wx.env.USER_DATA_PATH}/hello.docx`,
				  data: JSON.stringify(uni.getStorageSync('list')),
				  encoding: 'utf8',
				  success(res) {
					  console.log(1)
					  wx.openDocument({
					        filePath: `${wx.env.USER_DATA_PATH}/hello.docx`,
					        success: function (res) {
					          console.log('打开文档成功')
					        },
							fail(res) {
												  console.log(4)
							  console.log(res)
							}
					      })
					 

				  },
				  fail(res) {
					  console.log(4)
				    console.log(res)
				  }
				})
			},
			del(id){
				let that= this
				uni.showModal({
					content:"是否删除此货物？",
					showCancel:true,
					success(res) {
						if(res.confirm){
							let list = uni.getStorageSync('list')
							let oldListIndex = 0
							list.map((item,index)=>{
								if(item.id == id){
									oldListIndex = index
								}
							})
							list.splice(oldListIndex,1)
							uni.setStorageSync('list',list)
							let listIndex = 0
							that.list.map((item,index)=>{
								if(item.id == id){
									listIndex = index
								}
							})
							that.list.splice(listIndex,1)
						}
					}
				})
			},
			goDetail(id){
				console.log(id)
				uni.navigateTo({
					url:id?('/pages/detail/index?id='+id):'/pages/detail/index'
				})
			},
			setList(){
				let that = this
				this.oldList = uni.getStorageSync('list')||[]
				let list = this.oldList.filter(item=>{
					return item.name.match(that.name)
				})
				list.forEach(item=>{
					item.chooseIndex = 0
				})
				this.list = list
			},
			choose(index1,index2){
				this.list[index1].chooseIndex = index2
				this.$forceUpdate()
			},
			search(e){
				let list = this.oldList.filter(item=>{
					return item.name.match(e)
				})
				list.forEach(item=>{
					item.chooseIndex = 0
				})
				this.list = list
			}
		}
	}
</script>

<style scoped lang="scss">
	.tips{
		padding: 30upx;
		color: #ccc;
		text-align: center;
	}
	.searchBox{
		display: flex;
		align-items: center;
		height: 120upx;
		padding: 0 30upx;
		background-color: white;
		position: fixed;
		left: 0;
		top: 0;
		width: 750upx;
		box-shadow: 0 -10upx 16upx 10upx rgba(0, 0,0 ,0.3);
	}
	.zhanwei{
		height: 120upx;
	}
	.listBox{
		padding: 30upx;
		padding-bottom: 200upx;
	}
	.list{
		background-color: white;
		border-radius: 20upx;
		padding: 30upx;
		box-shadow:  0 0 16upx -8upx rgba(0, 0, 0, 0.3);
	}
	.name{
		font-size: 36upx;
	}
	.optionsBox{
		display: flex;
		align-items: center;
	}
	.categoryBox{
		display: flex;
		flex-wrap: wrap;
		padding-top: 20upx;
	}
	.category{
		white-space: nowrap;
		margin: 0 20upx 20upx 0;
		border-radius: 6upx;
		padding: 10upx 30upx;
		background-color: #eee;
		color: #888;
		font-size: 30upx;
		box-shadow: 0 8upx 16upx -8upx rgba(0, 0, 0, 0.3);
	}
	.choose{
		color: white;
		background-color: orange;
	}
	.optionsBox{
		margin-top: 20upx;
	}
	.optionsDes{
		color: #ccc;
	}
	.btnListBox{
		position: fixed;
		right: 30upx;
		bottom: 60upx;
	}
	.addBox{
		width: 120upx;
		height: 120upx;
		color: white;
		margin-bottom: 30upx;
		display: flex;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		background-color: $uni-color-primary;
	}
	.btnBox{
		display: flex;
		margin-top: 30upx;
		justify-content: space-between;
	}
</style>
